<template>
    <div class="Venue_information">
        <div class="Venue_wrap">
            <div class="Venue_join">
                <div class="Venue_left">
                    <div class="Venue_title">
                        <span>场馆信息</span>
                    </div>   
                    <div class="Venue_content">
                        <ul>
                            <li>
                                <span>场馆名称：</span>
                                <el-input v-model="gym_name"  @click.stop="gymName($event)"></el-input>
                            </li>
                            <li>
                                <span>场馆地址：</span>
                                <el-input v-model="gym_address" @click.stop="gymAddress($event)"></el-input>
                            </li>
                            <li>
                                <span>营业时间：</span>
                                <div class="Venue_data">
                                    <el-input v-model="open_time" :placeholder="this.most.open_time" style="width:100%;" @click.stop="openTime($event)"></el-input>
                                    <!-- <font>到</font> -->
    
                                    <!-- <el-input v-model="input" placeholder="结束时间" style="width:36%;"></el-input> -->
                                </div>
                            </li>
                            <li>
                                <span style="width:20%;">前台电话：</span>
                                <el-input v-model="gym_phone" :placeholder="this.most.gym_phone" style="width:60%;" @click.stop="gymPhone($event)"></el-input>
                            </li>
                            <li>
                                <span>场馆标签：</span>
                                <div class="view">
                                    <!-- <el-input v-model="tas" maxlength=4 style="width: 83%;border: none;height: 29px;" ></el-input> -->
                                    <input v-model="tas" @click.stop="tas" maxlength=7 type="text" style="width: 83%;border: none;height: 29px;outline:none;">
                                    <el-button @click.stop="tjtas" style="height:28px;background:#666666;padding:0 25px;" type="info" size="small" round>添加</el-button>
                                </div>
                            </li>
                            <li>
                                <span></span>
                                <ol>
                                  <li v-for="(item,index) in tag" :key="index">
                                        <p>{{item}}</p>
                                        <i class="el-icon-close" @click="sctag(index,item)"></i>
                                    </li>
                                </ol>
                            </li>
                            <li style="width:110%;margin-top:15px;">
                                <span style="width:25%;"></span>
                                <div class="label">
                                    <div class="label_top" @click.stop="label">
                                        <i class="el-icon-caret-bottom"></i>
                                        <font>查看推荐标签</font>
                                    </div>
                                    <div class="label_list" >
                                        <ul>
                                            <li v-for="(item,index) in tags" :key="index">
                                                <i @click="tjtags(item,index)" class="el-icon-plus"></i>
                                                <span>{{item}}</span>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="Venue_right">
                    <p>场馆封面图：</p>
                    <div class="Venue_list">
                        <div class="Venue_image">
                            <i class="el-icon-picture"></i>
                            <span>上传场馆封面图</span>
                            <img :src="image" alt="">
                        </div>
                        <div class="Venue_find">
                        <input type="file" id="img" @change="imgChange()">
                        <el-button type="info" size="small" round>本地选择</el-button>
                        </div>
                    </div>
                </div>
            </div>
              <el-button type="primary" size="small" class="btn" @click.stop="revise">保存</el-button> 
        </div>
    </div>
</template>
<script>
    export default {
    
        data() {
            return {
                input: '',
                most:[],
                gym_name:'',
                gym_address:'',
                open_time:'',
                gym_phone:'',
                tas:'',
                image:this.$route.query.image,
                labelList:false,
                tag:[],
                tags: ['交通便利', '环境好', '动感单车', '有氧操课', '无氧器械', '运动氛围好', '课程多样', '教练专业']
            }
    
        },
        created(){
            this.ajax()

        },
    
        methods: {
            ajax(){
                 let obj = {}
                let _this = this;
                let qs = require("qs");
                _this.$axios.post("/yujiaextend/gymadmin/findYogaGymById", qs.stringify(obj), {
                        headers: {
                            "Content-Type": "application/x-www-form-urlencoded"
                        }
        
                    })
                    .then((response) => {
                        _this.most = response.data.data
                        _this.gym_name= response.data.data.gym_name
                        _this.gym_address=response.data.data.gym_address
                        _this.open_time=response.data.data.open_time
                        _this.gym_phone=response.data.data.gym_phone
                        _this.image=response.data.data.photo
                        _this.tag=response.data.data.tags
                    })
                    .catch((error) => {
                        console.log(error);
                    });
            },
            gymName(e){
                this.gym_name = e.target.value

            },
            gymAddress(e){
                this.gym_address = e.target.value
                            },
                            openTime(e){
                this.open_time = e.target.value
                            },
                            gymPhone(e){
                this.gym_phone = e.target.value
            },
            label(){
             this.labelList=!this.labelList
            },
            tjtas(){
                if(this.tas== ''){
                        this.$message({
                            type: 'warning',
                            message: '字段不可为空',
                            
                            });
                    return
                }else if(this.tas!=''){
                    for (var i=0;i< this.tag.length;i++){
                        if(this.tas == this.tag[i]){
                            this.$message({
                            type: 'warning',
                            message: '标签不可重复',
                            
                            });
                            this.tas=''
                           return
                        }
                    }
                    this.tag.push(this.tas)
                    this.tas=''
                }
               
            },
              tjtags(item,dx){
        this.tag.push(item)
         Array.prototype.delete=function(delIndex){
                var temArray=[];
                for(var i=0;i<this.length;i++){
                if(i!=delIndex){
                temArray.push(this[i]);
                }
                }
                return temArray;
                }
                var aa=this.tags
                // aa.delete(dx)
                // this.tags=aa.delete(dx)
    },
     sctag(dx,item){
         Array.prototype.delete=function(delIndex){
                var temArray=[];
                for(var i=0;i<this.length;i++){
                if(i!=delIndex){
                temArray.push(this[i]);
                }
                }
                return temArray;
                }
                var aa=this.tag
                aa.delete(dx)
                this.tag=aa.delete(dx)
    },
              imgChange(){
           setTimeout(() => {
                var _this = this;
                var file = document.getElementById("img").files[0];
                var formData = new FormData();
                formData.append("image", file);
                // console.log(formData);
                let obj = {
                //请求的参数
                formData: formData
                };
                $.ajax({
                url: "http://yogahome.top/yujia/admin/uploadimage",
                xhrFields: {
                    withCredentials: true
                },
                type: "POST",
                cache: false,
                data: formData,
                processData: false,
                contentType: false,
                async: false,
                success: function(result) {
                    if (result.message == "文件路径生成成功") {
                    // mui.toast("图片上传成功");
                       _this.$message({
                        type: 'success',
                        message: '图片上传成功!'
                    });
                      _this.image = result.data;
                    } else if (result.code == "-1") {
                        _this.$message({
                        type: 'error',
                        message: '上传失败!'
                    });
                    }
                }
                });
            });
        },
          revise(){
              
    
            let _this = this;
    
            let qs = require("qs");
              if(_this.tag != ''){
            var array=_this.tag
            var num
            for (let i = 0; i < array.length; i++) {
            num=array[i]+','+num
            }
            num=num.substring(0,num.indexOf("undefined")-1) 
        }    
           
             let obj = {
                 gymName:_this.gym_name,
                 remark:_this.most.remark,
                 gymAddress:_this.gym_address,
                 lng:_this.most.lng,
                 lat:_this.most.lat,
                 openTime:_this.open_time,
                 phone:_this.gym_phone,
                 photo:_this.image,
                 tag:num

             }
            _this.$axios.post("/yujiaextend/gymadmin/updateYogaGymInfo", qs.stringify(obj), {
    
                    headers: {
    
                        "Content-Type": "application/x-www-form-urlencoded"
                    }
    
                })
                .then((response) => {
                    if(response.data.code==1){
                        _this.ajax()
                         _this.$message({
                        type: 'success',
                        message:response.data.message
                    });

                    }else{
                          _this.$message({
                        type: 'error',
                        message:response.data.message
                    });

                    }
               
                })
                .catch((error) => {
    
                    console.log(error);
                });
        },
        }
    
    }
</script>
<style scoped>
    .Venue_information {
    
        width: 100%;
    
        height: 100%;
    
        background: #f2f2f2;
    
        position: absolute;
    
        left: 250px;
    
        top: 0;
    
        z-index: 2;
    
    }
    
    
    
    .Venue_wrap {
    
        width: 80%;
    
        height: 100%;
    
        margin-left: 3%;
    
    }
    
    
    
    .Venue_join {
    
        width: 100%;
    
        display: flex;
    
    }
    
    
    
    .Venue_wrap .Venue_left {
    
        width: 50%;
    
        margin-top: 100px;
    
    }
    
    
    
    .Venue_wrap .Venue_left .Venue_title {
    
        font-size: 18px;
    
        color: #000000;
    
        font-weight: bold;
    
    }
    
    
    
    .Venue_wrap .Venue_left .Venue_title span {
    
        padding-bottom: 5px;
    
        border-bottom: 5px solid #2d79f6;
    
    }
    
    
    
    .Venue_wrap .Venue_left .Venue_content {
    
        width: 70%;
    
        margin-top: 60px;
    
    }
    
    
    
    .Venue_wrap .Venue_left .Venue_content>ul {
    
        width: 100%;
    
    }
    
    
    
    .Venue_wrap .Venue_left .Venue_content>ul>li {
    
        display: flex;
    
        align-items: center;
    
        margin-top: 40px;
    
    }
    
    
    
    .Venue_wrap .Venue_left .Venue_content>ul>li span {
    
        width: 25%;
    
    }
    
    
    
    .Venue_wrap .Venue_left .Venue_content>ul>li .Venue_data {
    
        width: 100%;
    
        display: flex;
    
        align-items: center;
    
    }
    
    
    
    .Venue_wrap .Venue_left .Venue_content>ul>li .Venue_data font {
    
        margin: 0 20px;
    
        font-size: 16px;
    
    }
    
    
    
    .Venue_wrap .Venue_left .Venue_content>ul>li .view {
    
        width: 100%;
    
        display: flex;
    
        align-items: center;
    
        padding-bottom: 5px;
    
        border-bottom: 1px solid #cdcdcd;
    
    }
    
    
    
    .Venue_wrap .Venue_left .Venue_content>ul>li .view input {
    
        background: #f2f2f2;
    
    }
    
    
    
    .Venue_wrap .Venue_left .Venue_content>ul>li .view .el-button {
    
        padding: 0 20px;
    
    }
    
    .Venue_wrap .Venue_left .Venue_content>ul>li ol{
          width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    }    
    .Venue_wrap .Venue_left .Venue_content>ul>li ol li{
          display: flex;
    align-items: center;
    background: url(../../assets/images/venue_management/venue_03.png) no-repeat;
    background-size: 100% 100%;
    padding: 3px 10px;
    font-size: 13px;
    color: #fff;
    margin-right: 12px;
    margin-bottom: 10px;
    }

    .Venue_wrap .Venue_left .Venue_content>ul>li ol li i{
         margin-left: 15px;
    }    
    
    .Venue_wrap .Venue_left .Venue_content>ul>li .label {
    
        width: 120%;
    
        text-align: left;
    
    }
    
    
    
    .Venue_wrap .Venue_left .Venue_content>ul>li .label .label_top {
    
        width: 100%;
    
        font-size: 14px;
    
        color: #444444;
    
    }
    
    
    
    .Venue_wrap .Venue_left .Venue_content>ul>li .label .label_top i {
    
        font-size: 16px;
    
        color: #aaaaaa;
    
    }
    
    
    
    .Venue_wrap .Venue_left .Venue_content>ul>li .label .label_list {
    
        width: 100%;
    
    }
    
    
    
    .Venue_wrap .Venue_left .Venue_content>ul>li .label .label_list ul {
    
        display: flex;
    
        align-items: center;
    
        flex-wrap: wrap;
    
    }
    
    
    
    .Venue_wrap .Venue_left .Venue_content>ul>li .label .label_list ul li {
    
        padding: 5px 0;
    
        padding-right: 16px;
    
        padding-left: 8px;
    
        margin-top: 10px;
    
        background: url(../../assets/images/venue_management/venue_07.png) no-repeat;
    
        background-size: 100% 100%;
    
        margin-right: 12px;
    
    }
    
    
    
    .Venue_wrap .Venue_left .Venue_content>ul>li .label .label_list ul li i {
    
        font-size: 12px;
    
        color: #b4b4b4;
    
    }
    
    
    
    .Venue_wrap .Venue_left .Venue_content>ul>li .label .label_list ul li span {
    
        font-size: 12px;
    
        color: #606060;
    
    }
    
    
    
    .Venue_wrap .Venue_right {
    
        margin-top: 12%;
    
    }
    
    
    
    .Venue_wrap .Venue_right>p {
    
        font-size: 16px;
    
        color: #000000;
    
    }
    
    
    
    .Venue_wrap .Venue_right .Venue_list {
    
        display: flex;
    
        align-items: flex-end;
    
        margin-top: 20px;
    
    }
    
    
    
    .Venue_wrap .Venue_right .Venue_list .Venue_image {
    
        width: 350px;
    
        height: 350px;
    
        background: #cdcdcd;
    
        text-align: center;
        position: relative;
    
    }
    .Venue_wrap .Venue_right .Venue_list .Venue_image img{
    width: 350px;
    height: 350px;
    position: absolute;
    left: 0;
    top: 0;

    }
    
    
    .Venue_wrap .Venue_right .Venue_list .Venue_image i {
    
        font-size: 30px;
    
        color: #aaaaaa;
    
        margin-top: 135px;
    
    }
    
    
    
    .Venue_wrap .Venue_right .Venue_list .Venue_image span {
    
        display: block;
    
        font-size: 16px;
    
        color: #aaaaaa;
    
    }
    
    
    
    .Venue_wrap .Venue_right .Venue_list .Venue_image input {
    
        width: 350px;
    
        height: 350px;
    
        border: none;
    
        outline: none;
    
        position: absolute;
    
        left: 0;
    
        top: 0;
    
        text-align: center;
    
        line-height: 350px;
    
        opacity: 0;
    
    }
         .Venue_wrap .Venue_right .Venue_list .Venue_find{
             position: relative;
         }
     .Venue_wrap .Venue_right .Venue_list .Venue_find  .el-button{
 margin-left: 20px;
    
        padding: 8px 20px;
    
        background: #666666;
     }
     .Venue_wrap .Venue_right .Venue_list .Venue_find input{
        
        width:90px;
    
        height: 30px;
    
        border: none;
    
        outline: none;
    
        position: absolute;
    
        left: 20px;
    
        top: 0;
    
        text-align: center;
    
        opacity: 0; 
     }    
    .Venue_wrap .Venue_right .Venue_list .el-button {
    
       
    
    }
     .Venue_wrap .btn{
         margin-top: 120px;
         background: #2f7dfe;
         padding: 8px 33px;

    }
</style>


